<template>
	<view>
		<scroll-view scroll-y class="page">
			<view class="home-bg"></view>
			<view class="user-box">
				<view class="userinfo-box">
					<image :src="personalList.avatar" class="avatar round" :style="[{animationDelay: '0.1s'}]"></image>
					<text class="text-sm">{{personalList.realname}}</text>
					<text class="text-xs picker-btn" @tap="visible=!visible">{{ level3Cur ? level3Cur.title : "请选择科目" }}></text>
				</view>
				<view class="grade-box flex text-center">
					<view class="flex-sub flex flex-direction">
					  <view class="text-orange fill-width">{{ countInfo.total }}</view>
					  <view class="text-sm fill-width">已答题</view>
					</view>
					<view class="flex-sub flex flex-direction">
					  <view class="text-orange fill-width">{{ countInfo.rightCount }}</view>
					  <view class="text-sm fill-width">正确数</view>
					</view>
					<view class="flex-sub flex flex-direction">
					  <view class="text-orange fill-width">{{ countInfo.total != 0 ? (countInfo.rightCount/countInfo.total).toFixed(0) : 0 }}%</view>
					  <view class="text-sm fill-width">正确率</view>
					</view>
				</view>
			</view>
			
			<scroll-view class="uni-swiper-tab" scroll-x>
				<block>
					<view 
						:class="{'active' : tabIndex == 0}"
						class="swiper-tab-list"
					>
						<image class="img-con" src="/static/home/128/shuati.png"></image>
						<text 
							class="control-btn" 
							style="background-image: linear-gradient(to right, rgba(241,164,76,1) , rgba(246,205,89,1));" 
							@tap="goStart()">开始刷题</text>
					</view>
				</block>
				<block>
					<view 
						:class="{'active' : tabIndex == 1}"
						class="swiper-tab-list"
					>
						<image class="img-con" src="/static/home/128/cuoti.png"></image>
						<text 
							class="control-btn" 
							style="background-image: linear-gradient(to right, rgba(246,127,94,1) , rgba(245,141,112,1));" 
							@tap="goError()">我的错题</text>
					</view>
				</block>
			</scroll-view>
		</scroll-view>
		
		<view class="zhezhao" v-if="visible" @tap="visible=!visible"></view>
		<picker-view class="mpvue-picker-view" v-if="visible" :indicator-style="indicatorStyle" :value="selectedVal" @change="bindChange">
			<picker-view-column>
				<view class="item" v-for="(item,index) in categoryRootAry" :key="item.code">{{ item.title }}</view>
			</picker-view-column>
			<picker-view-column>
				<view class="item" v-for="(item,index) in level1Cur.children" :key="item.code">{{ item.title }}</view>
			</picker-view-column>
			<picker-view-column>
				<view class="item" v-for="(item,index) in level2Cur.children" :key="item.code">{{ item.title }}</view>
			</picker-view-column>
		</picker-view>
	</view>
</template>

<script>
	import api from '@/api/api'
	export default {
		name: "people",
		data() {
			return {
				personalList: {
				  avatar: '',
				  realname: '',
				  username: ''
				},
				countInfo: {
					total: 0,
					rightCount: 0,
					errorCount: 0
				},
				userUrl: '/sys/user/queryById',
				categoryUrl: '/category/loadTreeData',
				countUserUrl: '/question/aoQuestionAnswerRecord/countUser',
				userId: '',
				indicatorStyle: `height:500rpx;`,
				visible: false,
				categoryRootAry: [],
				level1Cur: {
					children: []
				},
				level2Cur: {
					children: []
				},
				level3Cur: null,
				selectedVal: [0,0,0],
				tabIndex: 0,
			};
		},
		watch: {
			cur: {
				immediate: true,
				handler() {
				    this.userId=this.$store.getters.userid;
					this.load();
					this.loadCount();
					this.loadCategory();
				},
			},
		},
		methods: {
			goStart(){
				uni.navigateTo({
					url:'/pages/answer/answer'
				})
				// if( !this.level3Cur ){
				// 	this.$tip.toast('请选择科目...');
				// } else {
				// 	let code = this.level3Cur.code, name = this.level3Cur.title;
				// 	uni.navigateTo({
				// 		url:'/pages/answer/answer?categoryCode=' + code + '&categoryName=' + name
				// 	})
				// }
			},
			goError(){
				
			},
			bindChange(e){
				if( e.detail.value[0] !== -1 ){
					this.level1Cur = this.categoryRootAry[e.detail.value[0]]
				}else{
					this.level1Cur = {
						children: []
					}
					this.level2Cur = {
						children: []
					}
					this.level3Cur = null
				}
				if( e.detail.value[1] !== -1 && this.level1Cur.children &&  this.level1Cur.children.length > 0 ){
					this.level2Cur = this.level1Cur.children[e.detail.value[1]]
				}else{
					this.level2Cur = {
						children: []
					}
					this.level3Cur = null
				}
				if( e.detail.value[2] !== -1 && this.level2Cur.children &&  this.level2Cur.children.length > 0 ){
					this.level3Cur = this.level2Cur.children[e.detail.value[2]]
				}else{
					this.level3Cur = null
				}
			},
			load(){
				if(!this.userId){
					return;
				}
				this.$http.get(this.userUrl,{params:{id:this.userId}}).then(res=>{
					 if (res.data.success) {
						let perArr = res.data.result
				        let avatar=(perArr.avatar && perArr.avatar.length > 0)? api.getFileAccessHttpUrl(perArr.avatar) : '/static/avatar_boy.png'
						this.personalList.avatar =avatar
						this.personalList.realname = perArr.realname
						this.personalList.username = perArr.username
					}
				}).catch(err => {
					if( err.data.code === 401 ){
						uni.navigateTo({
							url:'/pages/login/login'
						})
					}
				});
				
			},
			loadCount(){
				this.$http.get(this.countUserUrl).then(res=>{
					if (res.data.success) {
						this.countInfo = res.data.result;
					}
				}).catch(err => {
					console.log("err", err);
				});
			},
			loadCategory(){
				this.$http.get(this.categoryUrl,{params:{ async: false, pcode: "0" }}).then(res=>{
					if (res.data.success) {
						this.categoryRootAry = [{ title: "请选择", code: "-1", children: [{
							title: "请选择", code: "-1", children: [{
								title: "请选择", code: "-1"
							}]
						}] } , ...res.data.result];
					}
				}).catch(err => {
					console.log("err", err);
				});
			}
		}
	}
</script>

<style>
.home-bg {
	height: 450rpx;
	background: rgba(112,169,222,1);
}
.user-box{
	width: 80%;
	height: 250rpx;
	border-radius: 15px;
	margin: 0 auto;
	background: white;
	box-shadow: 0 1px 3px #d8d8d8;
	position: relative;
	top: -150rpx;
}

.userinfo-box{
	width: 100%;
	height: 60%;
	margin: 0;
	padding: 0;
	border: none;
	line-height: 150rpx;
	padding: 0 40rpx;
}

.grade-box{
	width: 100%;
	height: 40%;
	margin: 0;
	padding: 0;
	border: none;
	line-height: 25px;
}

.avatar{
	width: 80rpx;
	height: 80rpx;
	vertical-align: middle;
	margin-right: 10rpx;
}

.zhezhao{
	width: 100%;
	height: 70%;
	background-color: rgba(0, 0, 0, .2);
	position: absolute;
	top: 0;
}

.mpvue-picker-view {
	width: 100%;
	height: 30%;
	background-color: rgba(255, 255, 255, 1);
	position: fixed;
	bottom: 0;
	pointer-events: auto;
}

.item {
	text-align: center;
	width: 100%;
	height: 80rpx;
	line-height: 80rpx;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 20rpx;
}

.picker-btn{
	float: right;
}

.uni-swiper-tab{
	white-space: nowrap;
	height: 700rpx;
	padding: 0 50rpx;
}

.swiper-tab-list{
	display: inline-block;
	width: 92.5%;
	height: 600rpx;
	border-radius: 15rpx;
	border-left: 10px solid #6ea9e1;
	background: white;
	box-shadow: 3px 3px 5px #d8d8d8;
	margin: 0 3% 0 1%;
	text-align: center;
}

.active.swiper-tab-list{
	border-left: 10px solid #c3dac6;
}

.img-con{
	width: 300rpx;
	height: 300rpx;
	margin-top: 100rpx;
}

.control-btn{
	display: block;
	width: 70%;
	height: 70rpx;
	line-height: 70rpx;
	border-radius: 35rpx;
	margin: 0 auto;
	color: white;
	margin-top: 30rpx;
}

</style>
